<template>
    <el-carousel height="200px">
        <el-carousel-item v-for="item in 4" :key="item">
            <a class="item">
                <div class="carousel-caption">
                    <h3 class="title">{{ item }}</h3>
                </div>
            </a>
        </el-carousel-item>
    </el-carousel>
</template>

<script>
    export default {
        name: "Carousel"
    }
</script>

<style lang="scss" scoped>
.item {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: url(../../assets/img/html.png);
    background-size: cover;
    border-radius: 4px;
    .carousel-caption {
        position: absolute;
        left: 5%;
        bottom: 3%;
        text-align: left;
        text-shadow: none;
        color: #fff;
        z-index: 2;
        .title {
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 24px;
        }
    }
}
</style>